<script lang="ts" setup>
import { Page } from '@vben/common-ui';

import {
  Card,
  Divider,
  Descriptions,
  DescriptionsItem,
  Image,
} from 'ant-design-vue';
</script>

<template>
  <Page>
    <div class="mt-4 flex flex-col gap-4 md:flex-row">
      <!-- 左侧：建立连接、发送消息 -->
      <Card :bordered="false" class="md:w-2/2 w-full">
        <template #title>
          <div class="flex items-center">
            <span class="ml-2 text-lg font-medium">部门信息</span>
          </div>
        </template>
        <div class="mb-4 flex items-center rounded-lg p-3">
          <span class="mr-4 text-xl font-medium">基础信息:</span>
        </div>
        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="员工姓名">张三三</DescriptionsItem>
          <DescriptionsItem label="头像">头像</DescriptionsItem>
          <DescriptionsItem label="性别">男</DescriptionsItem>
          <DescriptionsItem label="工号">hzxx123456</DescriptionsItem>
          <DescriptionsItem label="部门名称">‌设计部‌</DescriptionsItem>
          <DescriptionsItem label="岗位职称">UI设计师</DescriptionsItem>
          <DescriptionsItem label="手机号码">13388995566</DescriptionsItem>
          <DescriptionsItem label="电子邮箱">241245252@qq.com</DescriptionsItem>
          <DescriptionsItem label="员工类型">正式员工</DescriptionsItem>
          <DescriptionsItem label="工作公司"
            >摩西智能工业股份有限公司</DescriptionsItem
          >
          <DescriptionsItem label="身份证号码"
            >650750281411067612</DescriptionsItem
          >
          <DescriptionsItem label="上级负责人">李四四</DescriptionsItem>
        </Descriptions>

        <Divider>
          <span class="text-gray-500"></span>
        </Divider>
        <div class="mb-4 flex items-center rounded-lg p-3">
          <span class="mr-4 text-xl font-medium">工作状态:</span>
        </div>

        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="员工状态">正常</DescriptionsItem>
          <DescriptionsItem label="入职日期">2023-01-01</DescriptionsItem>
          <DescriptionsItem label="试用期">3个月</DescriptionsItem>
          <DescriptionsItem label="转正日期">2023-04-01</DescriptionsItem>
          <DescriptionsItem label="司龄开始日期">2023-01-01</DescriptionsItem>
          <DescriptionsItem label="司龄">3年2个月</DescriptionsItem>
        </Descriptions>
        <Divider>
          <span class="text-gray-300"></span>
        </Divider>
        <div class="mb-4 flex items-center rounded-lg p-3">
          <span class="mr-4 text-xl font-medium">合同:</span>
        </div>

        <Descriptions :column="2" bordered :label-style="{ width: '138px' }">
          <DescriptionsItem label="合同编号">正常</DescriptionsItem>
          <DescriptionsItem label="合同类型">劳动合同</DescriptionsItem>
          <DescriptionsItem label="合同开始日期">2023-04-01</DescriptionsItem>
          <DescriptionsItem label="合同结束日期">2023-09-01</DescriptionsItem>
          <DescriptionsItem label="合同状态">已生效</DescriptionsItem>
          <DescriptionsItem label="合同公司">摩西智能工业股份有限公司</DescriptionsItem>
          <DescriptionsItem label="合同有效期">3年</DescriptionsItem>
          <DescriptionsItem label="合同签订日期">2023-09-01</DescriptionsItem>
        </Descriptions>
      </Card>
    </div>
  </Page>
</template>
